import React, { useState } from 'react';
import {
  Button,
  Pressable as RNPressable,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity as RNTouchableOpacity,
  View,
} from 'react-native';
import {
  GestureHandlerRootView,
  Pressable as GHPressable,
  RectButton,
  Touchable,
} from 'react-native-gesture-handler';

type LogEntry = { id: number; text: string };
let nextId = 0;

export default function App() {
  const [log, setLog] = useState<LogEntry[]>([]);

  function addLog(text: string) {
    setLog(prev => [{ id: nextId++, text }, ...prev].slice(0, 8));
  }

  function handlers(name: string) {
    return {
      onFocus: () => addLog(`[${name}] onFocus`),
      onBlur: () => addLog(`[${name}] onBlur`),
      onPress: () => addLog(`[${name}] onPress`),
    };
  }

  return (
    <GestureHandlerRootView style={styles.root}>
      <ScrollView contentContainerStyle={styles.content}>
        <View style={styles.columns}>
          <View style={styles.column}>
            <Text style={styles.sectionLabel}>React Native</Text>

            <RNPressable
              focusable
              disabled={true}
              style={styles.button}
              onFocus={() => addLog('[RN Pressable] onFocus')}
              onBlur={() => addLog('[RN Pressable] onBlur')}
              onPress={() => addLog('[RN Pressable] onPress')}
            >
              <Text style={styles.buttonText}>Pressable</Text>
            </RNPressable>

            <View style={styles.button}>
              <Button
                title="Button"
                onPress={() => addLog('[RN Button] onPress')}
              />
            </View>

            <RNTouchableOpacity
              focusable
              style={styles.button}
              onFocus={() => addLog('[RN TouchableOpacity] onFocus')}
              onBlur={() => addLog('[RN TouchableOpacity] onBlur')}
              onPress={() => addLog('[RN TouchableOpacity] onPress')}
            >
              <Text style={styles.buttonText}>TouchableOpacity</Text>
            </RNTouchableOpacity>
          </View>

          <View style={styles.column}>
            <Text style={styles.sectionLabel}>Gesture Handler</Text>

            <Touchable
              defaultOpacity={0.3}
              activeOpacity={0.7}
              activeScale={1.3}
              style={styles.button}
              {...handlers('GH Touchable')}
            >
              <Text style={styles.buttonText}>Touchable</Text>
            </Touchable>

            <GHPressable
              focusable
              style={styles.button}
              {...handlers('GH Pressable')}
            >
              <Text style={styles.buttonText}>Pressable</Text>
            </GHPressable>

            <RectButton
              focusable
              style={styles.button}
              {...handlers('GH RectButton')}
            >
              <Text style={styles.buttonText}>RectButton</Text>
            </RectButton>
          </View>
        </View>

        <View style={styles.logBox}>
          <Text style={styles.logTitle}>Event log</Text>
          {log.length === 0 ? (
            <Text style={styles.logEmpty}>No events yet</Text>
          ) : (
            log.map(entry => (
              <Text key={entry.id} style={styles.logEntry}>
                {entry.text}
              </Text>
            ))
          )}
        </View>
      </ScrollView>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
  content: {
    padding: 24,
    gap: 16,
  },
  columns: {
    flexDirection: 'row',
    gap: 24,
  },
  column: {
    flex: 1,
    gap: 12,
    alignItems: 'center',
  },
  sectionLabel: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  button: {
    width: '100%',
    height: 50,
    borderRadius: 8,
    backgroundColor: 'blue',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    color: 'white',
    fontWeight: '600',
    fontSize: 16,
  },
  logBox: {
    backgroundColor: '#1a1a1a',
    borderRadius: 8,
    padding: 12,
    minHeight: 180,
  },
  logTitle: {
    fontWeight: 'bold',
    marginBottom: 6,
    color: '#aaa',
    fontSize: 14,
  },
  logEmpty: {
    color: '#555',
    fontStyle: 'italic',
  },
  logEntry: {
    fontFamily: 'monospace',
    fontSize: 13,
    color: '#ddd',
    marginBottom: 3,
  },
});